<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业微信管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/fonts.css">
    <link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.min.css">
    <!-- bootstrap表格 -->
    <link rel="stylesheet" href="../../js/bootstrap/js/bootstrap-table-master/bootstrap-table.min.css">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div id="contact_cus_kpi">
        <div class="header">
            <div class="back">返回</div>
            <div class="type_select_wrapper">分配离职成员的资产</div>
        </div>
        <div class="container">
            <div class="title">
                <div class="left_text">
                    <span>离职成员(1人)</span>
                    <span class="tips_text">成员离职后，可以分配他的企业资产给其他服务人员</span>
                </div>
                <div class="right_text onAlreadyDistriMember">已分配的离职成员</div>
            </div>
            <div class="screen_wrapper">
                <form class="layui-form screen_form">
                    <div class="screen_item">
                        <span class="text">已离职成员：</span>
                        <div class="input_box">
                            <select name="member" disabled lay-search lay-filter="on_member_select">
                                <option value="">全部</option>
                                <option value="1">长沙沃邦：赵虹蕊</option>
                                <option value="2">峰之道咨询：吕海洋</option>
                            </select>
                        </div>
                    </div>
                    <div class="screen_item">
                        <span class="text">时间：</span>
                        <div class="time_wrapper">
                            <input class="layui-input" type="text" id="startDate">
                            <span class="text units">至</span>
                            <input class="layui-input" type="text" id="endDate">
                        </div>
                    </div>
                </form>
            </div>
            <div class="normal_btn distribution_btn">分配给其他成员</div>
            <div class="table_wrapper">
                <form class="layui-form">
                    <table class="layui-table member_table">
                        <thead>
                            <tr>
                                <th>
                                    <input type="checkbox" lay-filter="all_member_select" name="all_member_select"
                                        lay-skin="primary" value="全选">
                                </th>
                                <th>已离职成员</th>
                                <th>所属部门</th>
                                <th>待分配客户数</th>
                                <th>待分配群聊数</th>
                                <th>离职时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr data-id="0">
                                <td>
                                    <input type="checkbox" lay-filter="member_select" name="member_select"
                                        lay-skin="primary" value="0">
                                </td>
                                <td class="name">刘毅华</td>
                                <td>长沙峰之道</td>
                                <td>2</td>
                                <td>2</td>
                                <td>2020-02-21</td>
                            </tr>
                            <tr data-id="1">
                                <td>
                                    <input type="checkbox" lay-filter="member_select" name="member_select"
                                        lay-skin="primary" value="1">
                                </td>
                                <td class="name">赵虹蕊</td>
                                <td>沃邦咨询</td>
                                <td>2</td>
                                <td>2</td>
                                <td>2020-02-21</td>
                            </tr>
                            <tr data-id="2">
                                <td>
                                    <input type="checkbox" lay-filter="member_select" name="member_select"
                                        lay-skin="primary" value="2">
                                </td>
                                <td class="name">吕海洋</td>
                                <td>沃邦咨询</td>
                                <td>1</td>
                                <td>0</td>
                                <td>2020-02-21</td>
                            </tr>
                        </tbody>
                    </table>
                </form>
                <div class="paging_style" id="paging"></div>
            </div>
        </div>
    </div>

    <!-- 2020-02-21 start -->
    <!-- 分配成员模态框 -->
    <div class="modal fade normal_modal" id="logo_add_member_modal" tabindex="-1" role="dialog"
        aria-labelledby="logo_add_member_modal_label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="logo_add_member_modal_label">选择分配成员</h4>
                </div>
                <div class="modal-body">
                    <div class="select_person_wrapper">
                        <div class="left_wrapper">
                            <div class="logo_add_member_protree_container"></div>
                        </div>
                        <div class="right_wrapper">
                            <div class="title">已选择的成员</div>
                            <div class="selected">
                                <div class="department_members selected_members" id="logo_add_member_selected_members">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="logo_add_member_submit_dep_member">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 分配成员模态框 -->
    <!-- 2020-02-21 end -->

    <script src="../../js/jquery-3.3.1.min.js"></script>
    <script src="../../js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../js/layui/layui.js"></script>
    <!-- 树形结构 -->
    <script src="../../js/proTree.js"></script>
    <!-- 图表 -->
    <script src="../../js/highcharts/highcharts.js"></script>
    <script src="../../js/highcharts/exporting.js"></script>
    <script src="../../js/highcharts/no-data-to-display.js"></script>
    <script>
        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        }
        // 昨天的日期
        function getPreDate(dayNum) {
            var day1 = new Date();
            day1.setTime(day1.getTime() - (dayNum || 1) * 24 * 60 * 60 * 1000);
            let month = "";
            let day = "";
            if (day1.getMonth() < 10) {
                month = "0" + (day1.getMonth() + 1);
            } else {
                month = day1.getMonth() + 1;
            }
            if (day1.getDate() < 10) {
                day = "0" + day1.getDate();
            } else {
                day = day1.getDate();
            }
            var s1 = day1.getFullYear() + "-" + month + "-" + day;
            return s1;
        }
        // 获取当前日期
        function getDate() {
            var mydate = new Date();
            var str = "" + mydate.getFullYear() + "-";
            let month = "";
            let day = "";
            if (mydate.getMonth() < 10) {
                month = "0" + (mydate.getMonth() + 1);
            } else {
                month = mydate.getMonth() + 1;
            }
            if (mydate.getDate() < 10) {
                day = "0" + mydate.getDate();
            } else {
                day = mydate.getDate();
            }
            str += month + "-";
            str += day;
            return str;
        }
        var arr = [
            {
                id: 1,
                name: "长沙峰之道",
                pid: 2,
                department: true,
                Useful: true
            },
            {
                id: 2,
                name: "长沙沃邦",
                pid: 0,
                department: true,
                Useful: true
            },
            {
                id: 10,
                name: '子公司',
                pid: 1,
                department: true,
                Useful: true
            },
            {
                id: "LiuYiHua",
                name: "刘毅华",
                pid: 1,
                department: false,
                Useful: true
            },
            {
                id: "YeKaiQi",
                name: "叶铠齐",
                pid: 1,
                department: false,
                Useful: true
            },
            {
                id: "LiangXiaoLing",
                name: "梁小玲",
                pid: 1,
                department: false,
                Useful: true
            },
            {
                id: "WuFang",
                name: "吴访",
                pid: 10,
                department: false,
                Useful: true
            },
            {
                id: "ZhaoHongRui",
                name: "赵虹蕊",
                pid: 2,
                department: false,
                Useful: true
            },
            {
                id: "LvHaiYang",
                name: "吕海洋",
                pid: 2,
                department: false,
                Useful: true
            },
            {
                id: "ZengHongYun",
                name: "曾红云",
                pid: 2,
                department: false,
                Useful: true
            }
        ];
        // 2020-02-20 start
        let nav_index = getUrlParam('nav_index') // 拿到点击进来的nav_index
        // 2020-02-20 end

        layui.use('layer', function () {
            var layer = layui.layer;
            // 返回父级页面
            $(".back").click(function() {
                parent.location.href = "enterprise-staffing.html?nav_index=" + nav_index
            })
            layui.use('form', function () {
                var form = layui.form;
                // 已离职成员select选择
                form.on('select(on_member_select)', function (data) {
                    console.log(data.value)
                })
                // 全选
                form.on('checkbox(all_member_select)', function (data) {
                    if (data.elem.checked) {
                        $("input[name=member_select]").prop('checked', true)
                        form.render('checkbox')
                    } else {
                        $("input[name=member_select]").prop('checked', false)
                        form.render('checkbox')
                    }
                })

                // 有一个未选中全选取消选中
                form.on('checkbox(member_select)', function (data) {
                    var item = $("input[name=member_select]");
                    for (var i = 0; i < item.length; i++) {
                        if (item[i].checked == false) {
                            $("input[name=all_member_select]").prop("checked", false);
                            form.render('checkbox');
                            break;
                        }
                    }
                    //如果都勾选了  勾上全选
                    var all = item.length;
                    for (var i = 0; i < item.length; i++) {
                        if (item[i].checked == true) {
                            all--;
                        }
                    }
                    if (all == 0) {
                        $("input[name=all_member_select]").prop("checked", true);
                        form.render('checkbox');
                    }
                });

                // 2020-02-21 start
                // 点击分配给其他成员
                $(".distribution_btn").click(function () {
                    let memberList = $("input[name=member_select]")
                    let selectedMember = [] // 已选择的离职成员
                    memberList.each(function () {
                        if ($(this).prop('checked') == true) {
                            selectedMember.push($(this).val()) // 将选择的离职成员id添置数组
                        }
                    })
                    if (selectedMember.length == 0) {
                        layer.msg('请选择离职成员')
                        return
                    } else {
                        $("#logo_add_member_modal").modal('show')
                    }
                });

                // 确认分配成员
                form.on('submit(submit_dep_member)', function (data) {
                    let id = data.field.asset_member_id // 拿到要分配给的成员id
                    $("#assets_member_modal").modal('hide')
                    layer.msg('分配成功')
                    return false
                })
                // 2020-02-21 end

                var startDateValue = getPreDate(15) // 默认开始时间为前15天
                var endDateValue = getDate() // 默认结束时间为今天
                var nowDate = getDate()
                var pre_15_date = getPreDate(15)
                // 时间
                layui.use('laydate', function () {
                    var laydate = layui.laydate;
                    // 自定义开始日期
                    var startDate = laydate.render({
                        elem: '#startDate',
                        value: pre_15_date,
                        max: nowDate,
                        done(value, date) {
                            startDateValue = value
                            endDate.config.min = {
                                year: date.year,
                                month: date.month - 1,
                                date: date.date
                            };
                            // 执行ajax 刷新table数据
                        }
                    })

                    // 自定义结束日期
                    var endDate = laydate.render({
                        elem: '#endDate',
                        value: nowDate,
                        max: nowDate,
                        done(value, date) {
                            endDateValue = value
                            // 执行ajax 刷新table数据
                        }
                    })
                });


                let logo_add_member_memberSelected = []; // 选择的成员
                //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
                $(".logo_add_member_protree_container").ProTree({
                    arr: arr,
                    close: true,
                    simIcon: "iconfont icon-geren", //单个标题字体图标 不传默认glyphicon-file
                    mouIconOpen: "iconfont icon-wenjianjia1", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
                    mouIconClose: "iconfont icon-wenjianjia", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
                    callback: function (id, name, pid, department, useful) {
                        let data = [{
                            id,
                            name,
                            pid,
                            department,
                            useful
                        }];
                        let isAdd = true;
                        if (logo_add_member_memberSelected.length > 0) {
                            for (let i = 0; i < logo_add_member_memberSelected.length; i++) {
                                if (logo_add_member_memberSelected[i].name == data[0].name) {
                                    isAdd = false
                                    layer.msg('已经选过此成员了')
                                    break
                                }
                            }
                        }
                        if (department == "false") {
                            if (isAdd) {
                                logo_add_member_memberSelected = data;
                                $("#logo_add_member_selected_members").html(`
                        <div class="mem_item">
                            <i class="iconfont icon-geren"></i>
                            <span data-id="${data[0].id}" data-pid="${data[0].pid}" data-dep="${data[0].department}" data-useful="${data[0].useful}">${data[0].name}</span>
                            <i class="iconfont icon-shanchu delete_dep_mem"></i>
                        </div>
                        `);
                            }
                        }
                    }
                });
                // 删除部门、成员
                $("#logo_add_member_selected_members").on("click", ".delete_dep_mem", function () {
                    let id = $(this)
                        .siblings("span")
                        .attr("data-id");
                    let dep = $(this)
                        .siblings("span")
                        .attr("data-dep");
                    $(this)
                        .parent()
                        .remove();
                    for (let i = 0; i < logo_add_member_memberSelected.length; i++) {
                        if (id == logo_add_member_memberSelected[i].id) {
                            logo_add_member_memberSelected.splice(i, 1);
                            break;
                        }
                    }
                });

                // 2020-02-22 start
                // 拿到需要发送的部门、成员列表
                $("#logo_add_member_submit_dep_member").click(function () {
                    totalDatalist = logo_add_member_memberSelected;
                    console.log('logo_add_member_memberSelected', logo_add_member_memberSelected)
                    if (totalDatalist.length == 0) {
                        layer.msg('请选择分配成员')
                        return 
                    }
                    // 请求ajax

                    // ajax执行完毕后
                    logo_add_member_memberSelected = []
                    $("input[name=member_select]").each(function () {
                        if ($(this).prop('checked') == true) {
                            $(this).prop('checked', false)
                        }
                    })
                    $("input[name=all_member_select]").prop('checked', false)
                    form.render()
                    $("#logo_add_member_modal").modal('hide')
                    layer.msg('分配成功')
                });
                // 2020-02-22 end

                // 表格分页
                layui.use('laypage', function () {
                    var laypage = layui.laypage;
                    laypage.render({
                        elem: 'paging',
                        limit: 5,
                        theme: '#E51C23',
                        count: 20, //数据总数，从服务端得到
                        jump: function (obj, first) {
                            //obj包含了当前分页的所有参数，比如：
                            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                            console.log(obj.limit); //得到每页显示的条数
                            //首次不执行
                            if (!first) {
                                //do something
                            }
                        }
                    })
                });

                // 点击离职人员跳转至离职人员企业资产
                $(".member_table").on('click', 'tbody tr', function () {
                    let id = $(this).attr('data-id'); // 离职人员id
                    let name = $(this).find('.name').text() // 离职人员名字
                    self.location.href = "../distri-assets/distri-assets-value.html?nav_index=3&id=" + id + '&name=' + encodeURI(encodeURI(name))
                })

                // 点击跳转至已分配离职成员页面
                $(".onAlreadyDistriMember").click(function () {
                    self.location.href = "../distri-assets/already-distri-member.html?nav_index=3"
                })
            })

        })
    </script>
</body>

</html>